<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>纯CSS实现的彩色导航菜单效果</title>
    <link rel="stylesheet" href="sliding.css" type="text/css" media="screen"/>
</head>
<body>

<ul class="green">
    <li><a href="#" title="home" class="current"><span>home</span></a></li>
    <li><a href="#" title="products"><span>products</span></a></li>
    <li><a href="#" title="blog"><span>blog</span></a></li>
    <li><a href="#" title="contact"><span>contact</span></a></li>
</ul>

<ul class="blue">
    <li><a href="#" title="home" class="current"><span>home</span></a></li>
    <li><a href="#" title="products"><span>products</span></a></li>
    <li><a href="#" title="blog"><span>blog</span></a></li>
    <li><a href="#" title="contact"><span>contact</span></a></li>
</ul>

<ul class="pink">
    <li><a href="#" title="home" class="current"><span>home</span></a></li>
    <li><a href="http://sc.chinaz.com" title="products"><span>products</span></a></li>
    <li><a href="#" title="blog"><span>blog</span></a></li>
    <li><a href="#" title="contact"><span>contact</span></a></li>
</ul>

<ul class="red">
    <li><a href="#" title="home" class="current"><span>home</span></a></li>
    <li><a href="#" title="products"><span>products</span></a></li>
    <li><a href="#" title="blog"><span>blog</span></a></li>
    <li><a href="#" title="contact"><span>contact</span></a></li>
</ul>


<div style="text-align:center;clear:both">
    <p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
    <p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
</div>


</body>
</html>